<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>故障诊断系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .feature-icon {
            font-size: 2rem;
            color: #0d6efd;
            margin-bottom: 1rem;
        }
        .developer-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: none;
            transition: transform 0.3s ease;
        }
        .developer-card:hover {
            transform: translateY(-5px);
        }
        .tech-badge {
            background-color: #e7f5ff;
            color: #0d6efd;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            margin: 0.25rem;
            display: inline-block;
            transition: all 0.3s ease;
        }
        .tech-badge:hover {
            background-color: #0d6efd;
            color: white;
        }
        .project-features {
            background-color: #f8f9fa;
            padding: 2rem 0;
            margin-top: 2rem;
        }
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }
        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">故障诊断系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('main.index') }}">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('training.index') }}">模型训练</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('inference.index') }}">故障诊断</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('data.index') }}">数据管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container mt-4">
        <div class="row">
            <!-- 系统状态卡片 -->
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">系统状态</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span>模型状态:</span>
                            <span class="badge bg-{{ 'success' if model_exists else 'warning' }}">
                                {{ '已训练' if model_exists else '未训练' }}
                            </span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>可用数据集:</span>
                            <span class="badge bg-info">{{ datasets|length }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作卡片 -->
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">快速操作</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{{ url_for('training.index') }}" class="btn btn-primary">
                                开始训练模型
                            </a>
                            <a href="{{ url_for('inference.index') }}" class="btn btn-success">
                                进行故障诊断
                            </a>
                            <a href="{{ url_for('data.index') }}" class="btn btn-info">
                                管理数据集
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统说明 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">系统说明</h5>
                    </div>
                    <div class="card-body">
                        <h5>功能介绍</h5>
                        <ul>
                            <li>模型训练：上传数据集并训练故障诊断模型</li>
                            <li>故障诊断：使用训练好的模型进行故障诊断</li>
                            <li>数据管理：管理和预览数据集</li>
                        </ul>
                        
                        <h5>使用流程</h5>
                        <ol>
                            <li>在"数据管理"中上传故障数据集</li>
                            <li>在"模型训练"中选择数据集并训练模型</li>
                            <li>在"故障诊断"中输入数据进行诊断</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目特色 -->
    <section class="project-features">
        <div class="container">
            <h2 class="text-center mb-4">项目特色</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card h-100 animate-on-scroll">
                        <div class="card-body text-center">
                            <i class="bi bi-lightning-charge feature-icon"></i>
                            <h5 class="card-title">高效诊断</h5>
                            <p class="card-text">采用深度学习技术，快速准确地识别故障类型</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 animate-on-scroll">
                        <div class="card-body text-center">
                            <i class="bi bi-graph-up feature-icon"></i>
                            <h5 class="card-title">实时监控</h5>
                            <p class="card-text">提供详细的训练过程可视化和模型性能分析</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 animate-on-scroll">
                        <div class="card-body text-center">
                            <i class="bi bi-gear feature-icon"></i>
                            <h5 class="card-title">易于使用</h5>
                            <p class="card-text">直观的用户界面，简单的操作流程</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术栈展示 -->
    <section class="container my-5">
        <h2 class="text-center mb-4">使用技术</h2>
        <div class="text-center animate-on-scroll">
            <span class="tech-badge">Python</span>
            <span class="tech-badge">PyTorch</span>
            <span class="tech-badge">Flask</span>
            <span class="tech-badge">Bootstrap</span>
            <span class="tech-badge">深度学习</span>
            <span class="tech-badge">数据分析</span>
        </div>
    </section>

    <!-- 开发者信息 -->
    <section class="container my-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card developer-card animate-on-scroll">
                    <div class="card-body text-center">
                        <img src="https://api.dicebear.com/7.x/initials/svg?seed=MO" alt="开发者头像" 
                             class="rounded-circle mb-3" style="width: 100px; height: 100px;">
                        <h3 class="card-title">Machine Ops</h3>
                        <p class="card-text text-muted">基于深度学习的工业设备故障诊断系统</p>
                        <div class="mt-3">
                            <a href="https://github.com/yourusername" class="btn btn-outline-primary me-2">
                                <i class="bi bi-github"></i> GitHub
                            </a>
                            <a href="mailto:your.email@example.com" class="btn btn-outline-primary">
                                <i class="bi bi-envelope"></i> 联系我
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer mt-5 py-3 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center text-md-start">
                    <span class="text-muted">故障诊断系统 &copy; 2024</span>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <span class="text-muted">开发者：Machine Ops</span>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 添加滚动动画
        function checkScroll() {
            const elements = document.querySelectorAll('.animate-on-scroll');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                if (elementTop < windowHeight * 0.9) {
                    element.classList.add('visible');
                }
            });
        }

        window.addEventListener('scroll', checkScroll);
        window.addEventListener('load', checkScroll);
    </script>
</body>
</html> 